<template>
	<view class="product-card-container">
		<image class="product-img" :src="productInfo.image" mode="aspectFill" />
		<view class="product-title">
			{{productInfo.name}}
		</view>
		<view class="product-price">
			{{productInfo.price.symbol}}{{productInfo.price.value}}
		</view>
	</view>
</template>

<script>
	export default {
		name: 'product-card',
		props: {
			productInfo: {
				type: Object,
				default: ()=>({})
			}
		},
		data() {
			return {
			}
		},
		mounted() {

		},
		methods: {
			
		}
	}
</script>

<style>
	.product-card-container {
		background-color: #FFFFFF;
		width: 100%;
		border-radius: 10upx;
	}
	.product-card-container>.product-img {
		width: 100%;
		height: 500upx;
		border-radius: 10upx 10upx 0 0;
	}
	
	.product-card-container>.product-title {
		padding: 10upx 15upx 0 10upx;
	}
	
	.product-card-container>.product-price {
		padding: 10upx 15upx;
		color: #ED1C24;
		font-size: 35upx;
		font-weight: 600;
	}
</style>
